<template>
  <div class="app-container">

    <div class="title-btns">
      <span class="role-span"><span></span>文件列表</span>
    </div>

    <div class="head-container">
      <div class="head-search">
        <!-- 搜索 -->
        <el-select v-model="query.type" clearable placeholder="查找类型" class="filter-item" style="width: 130px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
        <el-date-picker
          v-model="query.createTime"
          :picker-options="pickerOptions"
          class="filter-item"
          size="mini"
          style="height: 31px;line-height:31px"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" style="margin-left:10px" @click="toQuery">搜索</el-button>
        <el-button class="filter-item" size="mini" icon="el-icon-refresh" @click="toReSet">重置</el-button>
        <!-- 新增 -->
      </div>
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="原文件名称" />
        <el-table-column prop="source" label="上传方式" />
        <el-table-column prop="size" label="文件大小" />
        <el-table-column prop="bucket" label="bucket" />
        <el-table-column :show-overflow-tooltip="true" prop="url" label="外连路径" />
        <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPermission(['ADMIN','FILES_ALL','FILES_SELECT'])" label="操作" width="125" align="center">
          <template slot-scope="scope">
            <el-popover
              :ref="scope.row.id"
              v-permission="['ADMIN','FILES_ALL','FILES_SELECT']"
              placement="top"
              width="180"
            >
              <p>确定下载该文件吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                <el-button :loading="downLoading" type="primary" size="mini" @click="download(scope.row.id,scope.row.name)">确定</el-button>
              </div>
              <el-button slot="reference" type="text" size="mini">下载</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page"
        style="margin-top: 8px;"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import initDict from '@/mixins/initDict'
import { parseTime } from '@/utils/index'
import {
  downLoadFile
} from '@/api/files/files'
export default {
  components: { },
  mixins: [initData, initDict],
  data() {
    return {
      height: document.documentElement.clientHeight - 180 + 'px;',
      downLoading: false, deptName: '', depts: [], deptId: null,
      dictobj: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      createTime: '',
      queryTypeOptions: [
        { key: 'name', display_name: '文件名称' },
        { key: 'bucket', display_name: 'bucket' }
      ]
    }
  },
  created() {
    this.getDictObj('user_status,user_type_status,sex_status')
    setTimeout(() => {
      this.$nextTick(() => {
        this.init()
      })
    }, 500)
  },
  mounted: function() {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + 'px;'
    }
  },
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
      this.url = 'file/list'
      const sort = 'createTime desc'
      const query = this.query
      const type = query.type
      const value = query.value
      const time = query.createTime
      this.params = { page: this.page, size: this.size, sort: sort }
      if (time) {
        if (time.length) {
          this.params['beginTime'] = time[0]
          this.params['endTime'] = time[1]
        }
      }
      if (type && value) {
        this.params[type] = value
      }
      return true
    },

    download(id, name) {
      downLoadFile(id).then(response => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(response, name)
        } else {
          var link = document.createElement('a')
          var blob = new Blob([response])
          link.download = name
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
